<template>
  <loading-empty-wrapper class="h-full" :loading="loading" :empty="empty">
    <div v-show="billStatus === 0" class="absolute top--34px left-10px">
      <selection-delete-btn v-model:checkedData="checkedRowKeys" text="删除" @delete-ids="delRows" />
    </div>
    <n-data-table
      :columns="columns"
      :data="rowData"
      :pagination="pagination"
      :bordered="false"
      :single-line="false"
      :scroll-x="4100"
      :row-key="rowKey"
      :row-class-name="rowClassName"
      :checked-row-keys="checkedRowKeys"
      virtual-scroll
      flex-height
      size="small"
      class="h-full"
      striped
      @update:checked-row-keys="handleCheck"
    />
  </loading-empty-wrapper>
</template>

<script setup lang="tsx">
import { ref, reactive, computed, h, watch, onUnmounted } from 'vue';
import type { DataTableColumn, PaginationProps, DataTableRowKey } from 'naive-ui';
import { fetchPurchaseSettlementDetails } from '@/service';
import { useBillContext } from '@/context';
import { useLoadingEmpty } from '@/hooks';
import SelectionDeleteBtn from './SelectionDeleteBtn.vue';

const { useInject } = useBillContext();
const { billNo, billStatus, refreshBill } = useInject();

// 初始加载
const { loading, startLoading, endLoading, empty } = useLoadingEmpty();

// 获取接口数据并处理加载状态
async function getDataSource(n: any) {
  startLoading();
  const { data } = await fetchPurchaseSettlementDetails(n);
  if (data) {
    setDataSource(data);
    endLoading();
  }
}

// 处理接口数据
const rowData = ref<any>([]);
function setDataSource(data: any) {
  rowData.value = data;
}

// 处理行选中数据
const rowKey = (row: any) => row.A_BILLID;
const checkedRowKeysRef = ref<DataTableRowKey[]>([]);
const checkedRowKeys = checkedRowKeysRef;
function handleCheck(rowKeys: DataTableRowKey[]) {
  checkedRowKeysRef.value = rowKeys;
}

// 删除指定ID数组的行
function delRows(rows: any) {
  if (rows.length !== 0) {
    rows.forEach((id: any) => {
      rowData.value = rowData.value.filter((item: any) => item.A_BILLID !== id);
    });
    checkedRowKeysRef.value = [];
  }
}

// 配置分页参数
const pagination: PaginationProps = reactive({
  page: 1,
  pageSlot: 7,
  pageSize: 20,
  size: 'small',
  showSizePicker: true,
  showQuickJumper: true,
  pageSizes: [10, 20, 50, 100, 200, 500],
  suffix({ itemCount }) {
    return `共${itemCount}条记录`;
  },
  onChange: (page: number) => {
    pagination.page = page;
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
  }
});

// 获取表格当前页总行数
const pager: any = pagination;
const pageItemTotal = computed(() => (pager.page - 1) * pager.pageSize);

// 配置表格列参数
const baseCol: DataTableColumn[] = [
  {
    title: '序号',
    key: 'serial',
    width: 40,
    align: 'center',
    fixed: 'left',
    render(_, index) {
      return `${index + 1 + pageItemTotal.value}`;
    }
  },
  {
    type: 'selection',
    width: 30,
    fixed: 'left'
  },
  {
    key: 'A_BILLDATE',
    title: '日期',
    sorter: 'default',
    width: 100
  },
  {
    key: 'A_BILLTYPE',
    title: '单别',
    sorter: 'default',
    width: 70
  },
  {
    key: 'A_BILLNO',
    title: '单据编号',
    sorter: 'default',
    width: 160
  },
  {
    key: 'A_ORGBILLNO',
    title: '报检单号',
    sorter: 'default',
    width: 160
  },
  {
    key: 'A_ITEMID_ITEMCODE',
    title() {
      return h('span', { class: 'text-warning' }, '商品编号');
    },
    sorter: 'default',
    width: 120
  },
  {
    key: 'A_ITEMID_ITEMNAME',
    title: '商品名称',
    sorter: 'default',
    width: 140,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'A_ITEMID_ITEMDESC',
    title: '规格描述',
    sorter: 'default',
    width: 100,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'A_ITEMID_MODEL',
    title: '商品型号',
    sorter: 'default',
    width: 100,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'A_ITEMPECULIARITY_ATTRIBUTE1ID_DESCRIPTION',
    title: '颜色',
    sorter: 'default',
    width: 80,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'A_ITEMPECULIARITY_ATTRIBUTE4ID_DESCRIPTION',
    title: '仓位',
    sorter: 'default',
    width: 90
  },
  {
    key: 'A_ITEMPECULIARITY_ATTRIBUTE2ID_DESCRIPTION',
    title: '旧物料编码',
    sorter: 'default',
    width: 110
  },
  {
    key: 'A_ITEMPECULIARITY_ATTRIBUTE3ID_DESCRIPTION',
    title: '供应商',
    sorter: 'default',
    width: 160,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'A_UNITTYPE',
    title: '单位',
    sorter: 'default',
    width: 70
  },
  {
    key: 'A_QTY',
    title: '数量',
    sorter: 'default',
    width: 70
  },
  {
    key: 'A_DEALTYPE',
    title: '处理方式',
    sorter: 'default',
    width: 110
    // render: (row: any) => {
    //   const dealType = row.A_DEALTYPE === '' ? 0 : row.A_DEALTYPE;
    //   const textNames: any = {
    //     0: '正常处理',
    //     1: '降价处理',
    //     2: '返工后使用',
    //     3: '退货',
    //     4: '厂家跟线',
    //     5: '挑选使用',
    //     6: '让步使用'
    //   };
    //   return textNames[dealType];
    // }
  },
  {
    key: 'A_UNITCOST',
    title: '标准成本价',
    sorter: 'default',
    width: 100
  },
  {
    key: 'A_ISBASE',
    title: '正式价格',
    sorter: 'default',
    width: 90
    // render: (row: any) => {
    //   return row.A_ISBASE === 1 ? '是' : '否';
    // }
  },
  {
    key: 'A_PRICE',
    title: '入库价格',
    sorter: 'default',
    width: 90
  },
  {
    key: 'A_JSPRICE',
    title: '结算价格',
    sorter: 'default',
    width: 90
  },
  {
    key: 'A_COST',
    title: '标准成本金额',
    sorter: 'default',
    width: 120
  },
  {
    key: 'A_AMOUNT',
    title: '入库金额',
    sorter: 'default',
    width: 80
  },
  {
    key: 'A_JSAMOUNT',
    title: '结算金额',
    sorter: 'default',
    width: 80
  },
  {
    key: 'A_JSAGIO1',
    title: '损耗折扣价',
    sorter: 'default',
    width: 100
  },
  {
    key: 'A_JSAGIO1AMT',
    title: '损耗折扣额',
    sorter: 'default',
    width: 100
  },
  {
    key: 'A_JSAGIO2',
    title: '促销折扣价',
    sorter: 'default',
    width: 100
  },
  {
    key: 'A_JSAGIO2AMT',
    title: '促销折扣额',
    sorter: 'default',
    width: 100
  },
  {
    key: 'A_JSAGIO3',
    title: '调整折扣价',
    sorter: 'default',
    width: 100
  },
  {
    key: 'A_JSAGIO3AMT',
    title: '调整折扣额',
    sorter: 'default',
    width: 100
  },
  {
    key: 'A_JSAGIO',
    title: '结算总折扣价',
    sorter: 'default',
    width: 120
  },
  {
    key: 'A_JSRPRICE',
    title: '结算扣款后价格',
    sorter: 'default',
    width: 120
  },
  {
    key: 'A_JSRAMOUNT',
    title: '结算扣款后金额',
    sorter: 'default',
    width: 120
  },
  {
    key: 'A_CYPRICE',
    title: '价格差异',
    sorter: 'default',
    width: 80
  },
  {
    key: 'A_CYAMOUNT',
    title: '差异金额',
    sorter: 'default',
    width: 80
  },
  {
    key: 'A_JSTIME',
    title: '结算时间',
    sorter: 'default',
    width: 110
  },
  {
    key: 'A_OREMARK',
    title: '备注',
    sorter: 'default',
    width: 220,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'A_WHID_WHNAME',
    title() {
      return h('span', { class: 'text-warning' }, '仓库名称');
    },
    sorter: 'default',
    width: 160,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'A_DEPTID_DEPTNAME',
    title: '部门名称',
    sorter: 'default',
    width: 140,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'A_JSRTAXAMT',
    title: '结算扣款后税额',
    sorter: 'default',
    width: 120
  }
];

// 删除数组中的指定元素
function delArr(arr: DataTableColumn[], index: number) {
  return arr.slice(0, index).concat(arr.slice(index + 1, arr.length));
}

// 删除<部门名称>列
baseCol.splice(-2, 1);
// 判断结算单状态删除<选择>列
const columns = computed(() => {
  let col;
  if (billStatus.value !== 0) {
    col = delArr(baseCol, 1);
  } else {
    col = baseCol;
  }
  return col;
});

// 处理表格需要标记的行
const rowClassName = (row: any) => {
  const color: any = row.COLOR;
  if (color) {
    if (color === 1) {
      return 'text-red';
    }
    if (color === 2) {
      return 'bg-yellow';
    }
    if (color === 3) {
      return 'text-red bg-yellow';
    }
  }
  return '';
};

// 监听是否刷新对账单
const refreshData = watch(
  () => refreshBill.value,
  newData => {
    if (newData) {
      getDataSource(billNo.value);
    }
  }
);

// 监听对账单ID是否发生变化
const watchBillNo = watch(
  () => billNo.value,
  newId => {
    getDataSource(newId);
  }
);

// 销毁监听
onUnmounted(() => {
  refreshData();
  watchBillNo();
});

getDataSource(billNo.value);
</script>

<style scoped>
:deep(.text-red td) {
  color: rgb(255, 0, 0) !important;
}
:deep(.bg-yellow td) {
  background-color: rgb(255, 255, 210) !important;
}
html.dark div:deep(.bg-yellow td) {
  background-color: rgb(73, 67, 49) !important;
}
</style>
